<template>
  <view class="scoll">
    <uv-scroll-list :indicator="false">
      <view class="list">
        <view class="item" :class="{ active: current == item.id }" v-for="(item, index) in list" :key="index" @click="onTab(item)">{{ item.name }}</view>
      </view>
    </uv-scroll-list>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { get } from '@/api';

const emit = defineEmits(['click']);
let current = ref(0);
let list = ref([]);

onLoad(() => {
  getList();
})

function getList(){
  get('/api/Live/getTags').then(res => {
    if(res.code == 1){
      const data = res.data;
      list.value = [{ name: '全部', id: 0 }, ...data];
      
    }
  })
}
function onTab(row){
  current.value = row.id;
  emit('click', row.id);
}
</script>

<style lang="scss" scoped>
  .scoll{
    width: 100%;
    padding-top: 24rpx;
    .list{
      display: flex;
      align-items: center;
      .item{
        width: 144rpx;
        height: 58rpx;
        line-height: 58rpx;
        background-color: #F0F0F0;
        border-radius: 58rpx;
        text-align: center;
        font-size: 26rpx;
        color: #000000;
        margin-right: 8rpx;
        &.active{
          background-color: #E43222;
          color: #FFFFFF;
        }
      }
    }
  }
</style>